<script setup>
import Stage from './my-three/stage.vue';
import Box from './my-three/box.vue';
import Light from './my-three/light.vue';
import { ref } from 'vue';

const cameraPosition = ref({
  x: 0,
  y: 0,
  z: 5,
});

const lightPosition1 = ref({
  x: 5,
  y: 5,
  z: 5,
});

const lightPosition2 = ref({
  x: -5,
  y: -5,
  z: -5,
});

let alpha = 0;
const radius = 5;
let y = 1.5;
let direction = 'up';
const v = 5;

function onAnimationFrame (camera) {
  const x = radius * Math.cos(alpha);

  // [1, 5]
  if (direction === 'up') {
    y += 4 * v / (Math.PI * 200);
    if (y > 5) {
      direction = 'down';
    }
  } else {
    y -= 4 * v / (Math.PI * 200);
    if (y < 1) {
      direction = 'up';
    }
  }

  const z = radius * Math.sin(alpha);

  // light1.position.set(x, y, z);

  cameraPosition.value.x = x;
  cameraPosition.value.y = y;
  cameraPosition.value.z = z;

  camera.lookAt(0, 0, 0);
  alpha += 0.01 * v; // 628帧
}

</script>

<template>
  <stage
    :camera="{ ...cameraPosition }"
    @frameFunc="onAnimationFrame"
  >
    <box
      :width="2"
      :height=".5"
      materialType="MeshPhongMaterial"
    />
    <light
      :x="lightPosition1.x"
      :y="lightPosition1.y"
      :z="lightPosition1.z"
      :brightness="2"
    />
    <light
      v-bind="lightPosition2"
      :brightness=".2"
    />
  </stage>
</template>

<style>
body {
  margin: 0;
}
</style>
